<template> 
    <page-layout>

     
      <a-row :gutter="[10, 10]">
    
        <!-- 中心区域 -->
        <a-col :span="12">
          <a-card>
            <!-- 列表 -->
            <go2-table
              ref="tableRef"
              rowKey="table_name"
              :fetch="fetch"
              :columns="columns"
              :toolbar="toolbar"
              :operate="operate"
              :param="state.param"
              :pagination="pagination"
              :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
            >
              <!-- 继承至 a-table 的默认插槽 -->
            </go2-table>
          </a-card>
        </a-col>

         <a-col :span="12">
          <a-card>
              <go2-table
              ref="tableFields"
              rowKey="name"
              :param="state.param2"
              :fetch="fetchTableFields"
              :defaultToolbar="false"
              :columns="columns2" 
              :pagination="pagination" 
              :row-selection="false"
            > 
            </go2-table>
          </a-card>
        </a-col>

      </a-row>
      <create v-if="state.visibleCreate" :visible="state.visibleCreate" @close="closeCreate" :record="state.recordCreate"></create>
      
    </page-layout>
</template>

<script>
import { useI18n  } from "vue-i18n";
import add from "./modal/add.vue";
import edit from "./modal/edit.vue";
import create from "./modal/create.vue";
import info from "./modal/info.vue";
import { message , Modal} from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'; 
import { tableList,tableFields,remove } from "@/core/api/module/autocode";

import { reactive, createVNode, ref } from 'vue';

const removeKey = "remove";
const removeBatchKey = "removeBatch";

export default {
  components: {
    add,
    edit,
    info,
    create
  },
  setup() {
    const { t } = useI18n();
    const tableRef = ref();

   

    /// 删除配置
    const removeMethod = (record) => {
      Modal.confirm({
        title: '确认删除后，文件无法恢复!需要手动删除权限',
        icon: createVNode(ExclamationCircleOutlined),
        okText: t('ok'),
        cancelText: t('cancel'),
        onOk() {
          message.loading({ content: t('loading'), key: removeKey });
          remove({"table_name":record.table_name}).then((response) => {
            if(response.code == 0){
              message.success({content: t('Delete succeeded!'), key: removeKey, duration: 1}).then(()=> {
                tableRef.value.reload()
              })
            }else{
              message.error({content:response.msg, key: removeKey, duration: 1})
            }
          })
        }
      });
    }

  

    /// 列配置
    const columns = [ 
      { dataIndex: "table_name", key: "table_name" }, 
    ]; 
    const columns2 = [ 
      { dataIndex: "name", key: "name" },
      { dataIndex: "type", key: "type" },
      { dataIndex: "comment", key: "comment" }, 
      { dataIndex: "nullable", key: "nullable" }, 
    ];

    /// 数据来源  
    const fetch = async (param) => { 
      var response = await tableList(param);
      return {
        data: {list:response.data},
      };
    };

  const fetchTableFields = async (param) => { 
    console.log(param);
      var response = await tableFields(param);
      return {
        data: {list:response.data},
      };
    };
    

    /// 工具栏
    const toolbar = [
        { label: 'add', code: false, event: function () { state.visibleCreate = true }}, 
    ];

    /// 行操作 
    const operate = [
      { label: 'fields', code:false, event: function (record) { state.param2 = {table_name:record.table_name}}}, 
      { label: 'delete', code:false, event: function (record) { removeMethod(record) }},
    ];

    /// 分页参数
    const pagination = false;
    
    /// 外置参数 - 当参数改变时, 重新触发 fetch 函数
    const state = reactive({
      selectedRowKeys: [],
      param: {},
      param2: {isInit:false}, 
      visibleAdd: false,
      visibleEdit: false,
      visibleCreate:false,
      visibleInfo: false,
      recordEdit: {},
      recordInfo: {},
      recordCreate: {},
      
    })

    /// 查询参数
    const searchParam = [
        { key: "name", type: "input", label: 'name'}, 
        { key: "status", type: "select", label: 'status', value: "0",
          hidden: true ,
          options: [
            { text: 'all', value: "0"},
            { text: 'open', value: "1"},
            { text: 'close', value: "2"}
          ]
        }
    ]

    /// 查询操作
    const search = function(value) {
      state.param = value
      tableRef.value.reload()
    }

    const onSelectChange = selectedRowKeys => { 
      console.log(11);
      state.selectedRowKeys = selectedRowKeys;
    };

    const closeAdd = function(e){
      state.visibleAdd = false;  
      if (e) {
        tableRef.value.reload()
      }
    }

    const closeEdit = function(e){
      state.visibleEdit = false; 
      if (e) {
        tableRef.value.reload()
      }
      
    }

    const closeCreate = function(e){
      state.visibleCreate = false; 
      if (e) {
        tableRef.value.reload()
      } 
    }

    const closeInfo = function(e){
       state.visibleInfo = false;
       if (e) {
        tableRef.value.reload()
      }
    }

    return {
      t,
      state, 
      fetch, 
      fetchTableFields,
      search,
      toolbar, 
      columns, 
      columns2,  
      operate, 
      pagination,
      searchParam,
      onSelectChange, 
      closeAdd,
      closeEdit,
      closeCreate,
      closeInfo, 
      tableRef
    };
  },
};
</script>